<template>
  <view :class="theme">
    <view class="m-30">
      <view v-for="(log, index) in logs.list" :key="index"
        class="bg-section b-rounded-40 p-30 mb-30 flex-row items-center">
        <view class="flex-1 mr-20">
          <text class="mt-20 text-30">{{ log.type }}</text>
          <text class="mt-20 color-placeholder">{{ log.create_at }}</text>
        </view>
        <text v-if="log.coin"
          :class="`color-${{ 1: 'success', 2: 'error' }[log.state as '1' | '2'] || 'warning'} text-30`">
          {{ { 1: "+", 2: "-" }[(log.state as 1 | 2)] || "" }}{{ Math.abs(Number(log.coin || 0)) || "0.00" }}
        </text>
      </view>

      <view class="m-30 items-center z-9">
        <uv-image v-if="!logs.list.length" :showLoading="false" width="396" height="256" class="mt-60 mb-30"
          src="/static/img/blank.png" mode="aspectFit" />
        <uv-load-more :status="logs.cache.status" :is-dot="!!logs.list.length" icon-color="#999" color="#999" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";
import { pager } from "@/common/libs/utils";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { reactive } from "vue";

const { theme } = useMapState(["theme"]);
const logs = reactive({
  list: [] as any[],
  page: 0,
  limit: 20,
  cache: {
    page: 1,
    list: [] as any[],
    status: "nomore"
  },
  next: false,
});

const logTypes = {
  "1": { api: "/goodsGiveLog" },
};

let billKey = Object.keys(logTypes)[0] as keyof typeof logTypes;
onLoad(({ type = "cards" }: any) => {
  type && (billKey = type);
  queryLogs();
});

onPullDownRefresh(() => {
  queryLogs();
  setTimeout(uni.stopPullDownRefresh, 360);
});

onReachBottom(() => getLogs());

const queryLogs = () => {
  Object.assign(logs, {
    list: [] as any[],
    page: 0,
    cache: {
      page: 1,
      list: [] as any[],
      status: "nomore"
    },
    next: false,
  });
  getLogs();
}

const getLogs = () => pager({ url: logTypes[billKey].api }, logs);

</script>

<style lang="scss" scoped>
// scss
</style>